<template>
	<div>
		<div class="banner">
			<image :src="hdinfo.banner" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="inpBox">
				<div class="label">请输入姓名</div>
				<u--input placeholder="请输入姓名" border="surround" v-model="userinfo.name"></u--input>
			</div>
			<div class="inpBox">
				<div class="label">请选择照片</div>
				<div class="imgBox">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
				</div>
			</div>
			<div class="subBox">
				<u-button type="error" size="small" text="提交信息" @click="addUser()"></u-button>
			</div>
		</div>
		
	
	</div>
</template>

<script>
	const MAX_LIMIT = 20
	import { mapActions } from 'vuex';
	const db = wx.cloud.database()
export default {
	name: 'headcomd',
	data() {
		return {
			openid: "",
			hdid: "",
			userinfo:{
				name:"",
				img:"",
				hdid:"",
			},
			hdinfo:"",
			imgs:"",
			imgLink: 'https://www.baixuemianshi.com/zhuanti/toupiao/upload/',
			fileList1:[]
		};
	},
	onLoad(options) {
		this.hdid = options.hdid;
		this.getHdinfo()
	},
	computed: {
		userphone() {
			return this.$store.getters.userphone ? this.$store.getters.userphone : '';
		},
	},
	mounted() {
		let that = this
		this.getopenid()
	},
	created() {
		let that = this
	},
	methods: {
		...mapActions(['LogSetPhone']),
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		getHdinfo(){
			let that = this
			db.collection('toupiao_list').doc(that.hdid).get({
				success: function(res){
					
					that.hdinfo = res.data
					console.log(that.hdinfo)
				}
			})	
		},
		getopenid() {
			let that = this;
			wx.cloud.callFunction({
				name: 'getopenid',
				data: {},
				complete: res => {
					that.openid = res.result.openid
					that.getInfo()
				}
			});
		},
		getInfo(){
			let that = this
			db.collection('toupiao_options').where({
				hdid: that.hdid,
				_openid: that.openid
			}).get({
				success: res => {
					if(res.data.length > 0){
						that.userinfo = res.data[0]
						console.log(that.userinfo)
						that.fileList1.push({
							url: that.imgLink + '' + that.userinfo.img
						})
					}else{
						
					}
				}
			})
		},
		showImg(img){
			wx.previewImage({
				urls: [img], //需要预览的图片http链接列表，注意是数组
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		},
		chooseImage() {
			var that = this;
			wx.chooseImage({
				count: 1, // 默认9
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					var tempFilePaths = res.tempFilePaths
					that.imgs = tempFilePaths
					console.log(that.imgs)
				},
				fail:function(req){
					console.log(req)
				}
			})
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length

			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
			console.log(this.fileList1)
			this.userinfo.img = this.fileList1[0].url
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://www.baixuemianshi.com/zhuanti/toupiao/xcx2.php', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(JSON.parse(res.data).data)
						}, 1000)
					}
				});
			})
		},
		addUser(){
			let that = this
			if(!that.userinfo.name){
				uni.showToast({
					title:"请输入姓名"
				})
				return 
			}
			if(!that.userinfo.img){
				uni.showToast({
					title:"请上传照片"
				})
				return 
			}
			
			uni.showModal({
				title:"确认提交？",
				content:"一旦提交，无法修改",
				success(res) {
					if(res.confirm){
						db.collection('toupiao_options').add({
							data:{
								name: that.userinfo.name,
								img: that.userinfo.img,
								hdid: that.hdid
							},
							success: res=>{
								uni.showToast({
									title:"提交成功",
									icon:"success"
								})
								uni.navigateBack(-1)
							}
						})
					}
				}
				
			})
			
		}
	},
	components: {}
};
</script>

<style>
@import url("./index.css");

</style>

